<?php
    include_once("../action/checkAuthenticationAction.php");
    include_once("../service/categoryService.php");
    
    include_once("../util/authUtil.php");
    $perm_array = $_SESSION["permissions"];
?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Dashboard</title>
	<?php include("import-css.php");?>	
    <style>
        #sortable1, #sortable2 { list-style-type: none; margin: 5px 0 0 0; padding: 0 0 2.5em; border:1px solid black; min-height:20px; min-width:160px; border-radius:4px;}
        #sortable1 li, #sortable2 li {cursor:pointer; margin: 0 1% 1% 5px; padding: 1%; font-size: 1.2em; width: 96%; min-width:96%;}
    </style>
</head>
<body>
	<?php include("header.php");?>
    
    <div class="container-fluid">
		<div class="row-fluid">
            <!--Menu-->
            <?php include("menu.php");?>
            <?php
                $action = isset($_GET["action"]) ? $_GET["action"] : 8;
                if($action == 9){
                    $optionid = $_GET["id"];
                    $edit_option = getOptionById($optionid);
                }
            ?>
            <!--Content-->
            <div class="box span10 offset2">
                <div class="box-content">
                <?php
                    if(!authUtil(array("edit optionitem","create optionitem","view optionitem"),$perm_array,false)){
                        echo "<script>window.location.href='../admin/index.php';</script>";
                    }
                    $require_perm = array("edit optionitem","create optionitem");
                ?>
                    <form class="form-horizontal" method="POST" action="<?php if(authUtil($require_perm,$perm_array,false)){if($action == 9 && authUtil(array("create optionitem","edit optionitem"),$perm_array,false)){echo "../action/editOptionAction.php";}}?>" id="new_option_form">
                        <div class="control-group">
                            <label for="optionTitle" class="control-label">Tên thuộc tính</label>
                            <div class="controls">
                                <input required type="text" value="<?php echo ($action == 9 ?  $edit_option["OPP_NAME"] : ""); ?>" id="optionTitle" name="optionTitle" class="input-xlarge focused">
                            </div>
                        </div>
                        <br />
						<!--OPTIONITEMS-->
                        <div class="control-group">
                            <label class="control-label">Thuộc tính con</label>
                            <div class="controls" id="optionItemControlGroup">
                                <input type="text" value="" id="optionItemTitle" class="input-xlarge focused">
                                <button type="button" class="btn btn-primary" onclick="addOptionItem($('#optionItemTitle').val(),$('#sortable2'));">Tạo mới</button>
                                <br />
                                <ul id="sortable2" name="sortable2[]" class="connectedSortable">
                                    <?php
                                        if($action == 9){
                                            $optionitems = getOptionItemOfOption($optionid);
                                        }
                                        while($item = mysql_fetch_array($optionitems)){
                                            echo "<li class='ui-state-default' value='".$item["OOI_ID"]."'>".$item["OOI_NAME"];
                                            if(isOptionItemDeleteTable($item["OOI_ID"]) == 1){
                                                echo "<a style='float:right;' onclick='deleteOptionItem(".$item["OOI_ID"].",$(this));'>X</a>";
                                            }
                                            echo "<input type='hidden' name='selectedOptionItems[]' value='".$item["OOI_ID"]."'/>";
                                            echo "</li>";
                                        }
                                    ?>                                    
                                </ul>
                            </div>
                        </div>
                        <?php
                            $require_perm = array("edit optionitem","create optionitem");
                            if(authUtil($require_perm,$perm_array,false)){
						?>
                                <center>
                                <button type="submit" class="btn btn-primary">Cập nhật</button>
                                </center>
                                <input type="hidden" name="edit_option_id" id="edit_option_id" value="<?php echo isset($edit_option["OPP_ID"])?$edit_option["OPP_ID"]:""; ?>"/>
                        <?php
                            }
                        ?>
                    </form>
                </div>
                
            </div><!--/span-->
        </div>
    </div>

    <?php include("footer.php");?>
		
	</div><!--/.fluid-container-->

	<?php include("import-js.php");?>	

    <script>
    $(function() {
		$( "#sortable1, #sortable2" ).sortable({
            connectWith: ".connectedSortable",
            items: "li:not(.unsortable)"
        }).disableSelection();
				
        $("#new_category_form").validate({
            submitHandler: function(form) {
			//Do not submit attributes and options in left-side list
                options1 = $("#sortable1").find("input");
                options1.each(function(){
                    $(this).attr("name","");
                    console.log($(this).attr("name",""));
                });
                $(form).submit();
            }
        });
    });
    function addOptionItem(title,destination){
        $(destination).append("<li class='ui-state-default' value='0'>"+title+"*<a style='float:right;' onclick='deleteOptionItem(0,$(this));'>X</a><input type='hidden' name='selectedOptionItems[]' value='"+title+"'/></li>");
        $("#optionItemTitle").val("");
    }
	
	function deleteOptionItem(optItemId,option){
        if(optItemId == 0){
            $(option).parent().remove();
        }else{
                $.ajax({
                type: "GET",
                url: "../action/ajax/deleteOptionItemAction.php",
                data: { id: optItemId }
            }).done(function( data ) {
                if(data == 1){
                    deletetedOpt = $(option).parent();
                    deletetedOpt.remove();
                }else{
                    alert("delete failed");
                }
            });
        }
    }
    </script> 
</body>
</html>

